<template>
  <v-card :loading="loading" class="mx-auto my-12" max-width="85%">
    <template v-slot:loader="{ isActive }">
      <v-progress-linear
        :active="isActive"
        color="deep-purple"
        height="4"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-card-item>
      <v-card-title class="text-h4 my-2 mx-3">Project Information</v-card-title>

      <v-card-subtitle class="mx-2">
        <v-chip-group
          v-model="amenities"
          selected-class="bg-deep-purple-accent-4"
          column
          disabled
        >
          <v-chip variant="outlined" filter>产品1</v-chip>
          <v-chip variant="outlined" filter>产品1</v-chip>
          <v-chip variant="outlined" filter>产品1</v-chip>
          <v-chip variant="outlined" filter>产品1</v-chip>
        </v-chip-group>
      </v-card-subtitle>
    </v-card-item>

    <v-card-text>
      <v-row align="center" class="mx-2">
        <v-col cols="auto">
          <!--          <div class="text-subtitle-1">$ • Italian, Cafe</div> -->
          <span class="me-1 text-subtitle-1">时间1：</span>
          <span class="me-1">{{var1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="me-1 text-subtitle-1">batch1：</span>
          <span class="me-1">{{var1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="me-1 text-subtitle-1">时间2：</span>
          <span class="me-1">{{var1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="me-1 text-subtitle-1">batch2：</span>
          <span class="me-1">{{var1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="me-1 text-subtitle-1">auditor：</span>
          <span class="me-1">{{var1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </v-col>
      </v-row>

      <v-divider class="mx-4 my-3"></v-divider>
      <v-card-title>Product Detail</v-card-title>
      <v-data-table :items="consoles" class="mx-2">
        <template v-slot:item.exclusive="{ item }">
          <v-checkbox v-model="item.exclusive" readonly></v-checkbox>
        </template>
      </v-data-table>

      <v-divider class="mx-4 my-3"></v-divider>
      <v-card-title>Inspection Entry</v-card-title>

      <div class="px-4">
        <v-chip-group v-model="selection" disabled>
          <v-chip>项目1</v-chip>

          <v-chip>项目2</v-chip>

          <v-chip>项目3</v-chip>

          <v-chip>9:00PM</v-chip>
          <v-chip>5:30PM</v-chip>

          <v-chip>7:30PM</v-chip>

          <v-chip>8:00PM</v-chip>

          <v-chip>9:00PM</v-chip>
        </v-chip-group>
      </div>

      <v-divider class="mx-4 my-3"></v-divider>

      <v-card-title class="text-h4 my-2">Inspection Information</v-card-title>
      <v-data-table
        class="mx-2"
        :headers="headers"
        :items="plants"
        density="compact"
        item-key="name"
      ></v-data-table>
    </v-card-text>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      var1: 1,
      loading: false,
      amenities: [1, 4],
      selection: [1],
      consoles: [
        {
          name: 'PlayStation 5',
          manufacturer: 'Sony',
          year: 2020,
          sales: '10M',
          exclusive: true,
        },
      ],
      headers: [
        { title: 'Plant', align: 'start', sortable: false, key: 'name' },
        { title: 'Light', align: 'end', key: 'light' },
        { title: 'Height', align: 'end', key: 'height' },
        { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
        { title: 'Price ($)', align: 'end', key: 'price' },
      ],
      plants: [
        {
          name: 'Fern',
          light: 'Low',
          height: '20cm',
          petFriendly: 'Yes',
          price: 20,
        },
        {
          name: 'Snake Plant',
          light: 'Low',
          height: '50cm',
          petFriendly: 'No',
          price: 35,
        },
        {
          name: 'Monstera',
          light: 'Medium',
          height: '60cm',
          petFriendly: 'No',
          price: 50,
        },
        {
          name: 'Pothos',
          light: 'Low to medium',
          height: '40cm',
          petFriendly: 'Yes',
          price: 25,
        },
        {
          name: 'ZZ Plant',
          light: 'Low to medium',
          height: '90cm',
          petFriendly: 'Yes',
          price: 30,
        },
        {
          name: 'Spider Plant',
          light: 'Bright, indirect',
          height: '30cm',
          petFriendly: 'Yes',
          price: 15,
        },
        {
          name: 'Air Plant',
          light: 'Bright, indirect',
          height: '15cm',
          petFriendly: 'Yes',
          price: 10,
        },
        {
          name: 'Peperomia',
          light: 'Bright, indirect',
          height: '25cm',
          petFriendly: 'Yes',
          price: 20,
        },
        {
          name: 'Aloe Vera',
          light: 'Bright, direct',
          height: '30cm',
          petFriendly: 'Yes',
          price: 15,
        },
        {
          name: 'Jade Plant',
          light: 'Bright, direct',
          height: '40cm',
          petFriendly: 'Yes',
          price: 25,
        },
      ],
    }),

    methods: {
      reserve() {
        this.loading = true

        setTimeout(() => (this.loading = false), 2000)
      },
    },
  }
</script>